<template>
<div class="money-logs">
	<sub-page-header title="资金明细"></sub-page-header>
	<ul class="filters clearfix">
		<li>
			<span @click="showFilter('dateFilterShow');">时间<span :class="{caret: !dateFilterShow, 'caret-up': dateFilterShow}"></span></span>
			<div v-show="dateFilterShow" class="dropdown">
				<el-button @click="setFilter('dateFilter', '');" class="choice">不限</el-button>
				<el-button @click="setFilter('dateFilter', '-7 days');" class="choice">7天内</el-button>
				<el-button @click="setFilter('dateFilter', '-15 days');" class="choice">半个月</el-button>
				<el-button @click="setFilter('dateFilter', '-1 month');" class="choice">1个月</el-button>
				<el-button @click="setFilter('dateFilter', '-3 month');" class="choice">3个月</el-button>
				<el-button @click="setFilter('dateFilter', '-6 month');" class="choice">半年</el-button>
				<el-button @click="setFilter('dateFilter', '-1 year');" class="choice">1年</el-button>
			</div>
		</li>
		<li>
			<span @click="showFilter('typeFilterShow');">类型<span :class="{caret: !typeFilterShow, 'caret-up': typeFilterShow}"></span></span>
			<div v-show="typeFilterShow" class="dropdown">
				<el-button @click="setFilter('typeFilter', 0);">不限</el-button>
				<el-button @click="setFilter('typeFilter', 1);">资金</el-button>
			</div>
		</li>
		<li>
			<span @click="showFilter('incomeFilterShow');">收支<span :class="{caret: !incomeFilterShow, 'caret-up': incomeFilterShow}"></span></span>
			<div v-show="incomeFilterShow" class="dropdown">
				<el-button @click="setFilter('incomeFilter', '');">不限</el-button>
				<el-button @click="setFilter('incomeFilter', 1);">收入</el-button>
				<el-button @click="setFilter('incomeFilter', 0);">支出</el-button>
			</div>
		</li>
	</ul>
	<ul class="money-list">
		<li v-for="(item, index) in moneyList" class="clearfix" :key="index">
			<div class="pull-left">
				<p>{{item.num < 0 ? '支出' : '收入'}}</p>
				<small class="text-assit">{{item.create_time}}</small>
			</div>
			<div class="money">
				£ {{item.num}}
			</div>
		</li>
	</ul>
	<div class="bottom-margin"></div>
</div>
</template>

<script>
import SubPageHeader from '~/components/SubPageHeader.vue';
import api from '~/api/api.js';
import { ScolledBottom } from '~/utils/index.js';

export default {
	components: {
		SubPageHeader
	},
	data () {
		return {
			dateFilter: '',
			dateFilterShow: false,
			typeFilter: '',
			typeFilterShow: false,
			incomeFilter: '',
			incomeFilterShow: false,
			total: 0,
			next_page: 1,
			current_page: 0,
			moneyList: []
		}
	},
	created () {
		this.loadData();
		window.addEventListener('scroll', this.onScroll);
	},
	methods: {
		onScroll () {
			if (ScolledBottom(document.body)) {
				this.loadData();
			}
		},
		loadData () {
			if (this.next_page < 1) {
				this.$message('没有更多了...');
				return;
			}

			api.get(`/user/money_logs?page=${this.next_page}&date=${this.dateFilter}&type=${this.typeFilter}&is_income=${this.incomeFilter}`)
			.then(response => {
				this.next_page = response.data.next_page;
				this.current_page = response.data.current_page;
				this.total = response.data.total;
				if (this.current_page = 1) {
					this.moneyList = response.data.data;
					console.log(this.moneyList)
				} else {
					this.moneyList = this.moneyList.concat(response.data.data);
				}
			})
			.catch(error => {
				this.$message('加载失败').error();
			});
		},
		showFilter (key) {
			let keys = ['dateFilterShow', 'typeFilterShow', 'incomeFilterShow'];
			keys.forEach(item => {
				if(item == key) {
					this[item] = true;
				} else {
					this[item] = false;
				}
			})
		},
		// 设置过滤
		setFilter (key, value) {
			this[key] = value;
			this[key+'Show'] = false;
			this.next_page = 1;
			this.loadData();
		}
	},
	boforeDestroy () {
		window.removeEventListener('scroll', this.onScroll);
	}
}
</script>

<style scoped>

.money-logs {
	background-color: #fff;
}

.filters {
	border-bottom: 1px solid #eaeaea;
	position: relative;
}
.filters li {
	width: 33.33%;
	padding: 10px 0px;
	float: left;
	text-align: center;
}

.dropdown {
	width: 100%;
}

.dropdown .choice {
	margin-left: 10px;
	margin-bottom: 10px;
}

.money-list li {
	padding: 10px 15px;
	border-bottom: 1px solid #eaeaea;
}

.money-list li .money {
	margin-top: 15px;
	float: right;
}
</style>